/*
 * @Date: 2022-01-11 18:15:40
 * @LastEditors: LeeKing
 * @LastEditTime: 2022-01-13 17:31:34
 * @FilePath: \todo-app\src\components\TodoFooter.js
 */
import React, { Component } from 'react'


export default class TodoFooter extends Component {
  delAllCompleted = () => {
    const { ClearCompleted } = this.props
    ClearCompleted()
  }
 
  render() {
    const { list,setAllState,ClickState } = this.props
    const arr = list.filter(item => item.isDone === false)

    const ClearCompleted = list.filter(item => item.isDone === true)
   
   
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong>{arr.length}</strong> item left
        </span>
        <ul className="filters">
          <li>
            <a className={ClickState==='All'?"selected":null} href="#/" onClick={()=>setAllState('All')}>
              All
            </a>
          </li>
          <li>
            <a className={ClickState==='Active'?"selected":null} href="#/active" onClick={()=>setAllState('Active')}>Active</a>
          </li>
          <li>
            <a  className={ClickState==='Completed'?"selected":null} href="#/completed" onClick={()=>setAllState('Completed')}>Completed</a>
          </li>
        </ul>
      {ClearCompleted.length===0 ?null:  <button  onClick={this.delAllCompleted} className="clear-completed">Clear completed</button>}
      </footer>
    )
  }
}
